import { Button, Card, Drawer, Modal, Space, message } from 'antd';
import React, { useState, useEffect, useRef } from 'react'
import Generator from 'fr-generator';
import type { Setting, SettingWidget, ExtraButton } from 'fr-generator';
import 'antd/dist/antd.css'
import UploadImg from '@/components/UploadComponent';
import generatorSettings from './config'
import TextEditor from '@/components/TextEditor';
import DrConfigPanel from './components/Select/drConfigPanel';
import { generateForm, generateScreenShot } from '@/services/generatorService';
import CodeEditor from '@/components/CodeEditor';
import copy from 'copy-to-clipboard';
import { addFormTemplate, commonUpdate } from '@/services/formTemplateService';

interface Props {
  isOpen: boolean,
  closeEvent: (isOpen: boolean) => void;
  TableInfo: Generator.TableInfo;
}

const FormDesignIndex: React.FC<Props> = (props) => {
  const { isOpen, closeEvent } = props;
  const [codeText, setCodeText] = useState<string>('');
  const [open, setOpen] = useState(isOpen);
  const ref = useRef<any>(null);


  const onClose = () => {
    setOpen(false);
    closeEvent(false)
  };

  const extraButtons = () => {
    const buttons: ExtraButton[] = [{
      text: "生成代码", onClick: (event: any) => {
        console.log(event);
        console.log(ref.current?.getValue());
        generateForm(ref.current?.getValue()).then(result => {
          const { Items } = result;
          setOpen(true);
          setCodeText(Items[0] ?? '');
        })
      }
    },
    {
      text: "保存模板", onClick: (event: any) => {
        addFormTemplate({ SchemaJson: JSON.stringify(ref.current?.getValue()), ContentHtml: codeText, Name: "", ImgUrl: "" }).then(result => {
          const id = result.Items[0].Id;
          if (id) {
            generateScreenShot(id).then(imgResult => {
              const { Items } = imgResult;
              commonUpdate(id, "ImgUrl", Items[0]).then(updateResult => {
                if (updateResult.StatusCode === 200) {
                  message.success("保存成功！");
                }
              });
            })
          }
        })
      }
    }];
    return buttons;
  }

  useEffect(() => {
    setOpen(isOpen);
  }, [isOpen]);

  return (
    <Card>
      <div style={{ height: '80vh' }}>
        <Generator ref={ref} extraButtons={extraButtons()} widgets={{ uploadImg: UploadImg, textEditor: TextEditor, drConfigPanel: DrConfigPanel }} settings={generatorSettings} />

        <Modal
          width={700}
          destroyOnClose
          title="新建"
          open={open}

          onCancel={() => { setOpen(false) }}
          footer={[
            <Button key="submit" type="primary" onClick={() => {
              copy(codeText ?? '');
            }}>
              复制
            </Button>,
            <Button key="back" onClick={() => { setOpen(false) }} >
              取消
            </Button>,
          ]}
        >
          <CodeEditor language={'typescript'} value={codeText} />
        </Modal>
      </div>
    </Card>)
}

export default FormDesignIndex;
